<template>
  <div class="ai-platform">
    <!-- 背景Canvas元素 -->
    <canvas ref="backgroundCanvas" class="background-canvas"></canvas>
    <!-- 主要内容区域 -->
    <main class="main-content">
      <!-- 标题区域 -->
      <div class="title-section">
        <h1>能源大模型</h1>
      </div>

      <!-- 卡片区域 -->
      <div class="capabilities-section">
        <!-- 第一行卡片 -->
        <div class="card-row">
          <div
              v-for="(capability, index) in firstRowCapabilities"
              :key="index"
              class="capability-card"
              @mouseenter="highlightCard($event)"
              @mouseleave="resetCardHighlight($event)"
          >
            <div class="capability-icon">
              <img :src="capability.icon" alt="能力图标" class="icon-image" />
            </div>
            <div class="capability-content">
              <h3 class="capability-title">{{ capability.title }}</h3>
              <p class="capability-description">{{ capability.description }}</p>
            </div>
          </div>
        </div>

        <!-- 第二行卡片 -->
        <div class="card-row second-row">
          <div
              v-for="(capability, index) in secondRowCapabilities"
              :key="index"
              class="capability-card"
              @mouseenter="highlightCard($event)"
              @mouseleave="resetCardHighlight($event)"
          >
            <div class="capability-icon">
              <img :src="capability.icon" alt="能力图标" class="icon-image" />
            </div>
            <div class="capability-content">
              <h3 class="capability-title">{{ capability.title }}</h3>
              <p class="capability-description">{{ capability.description }}</p>
            </div>
          </div>
        </div>
      </div>
    </main>

    <!-- 右下角logo -->
    <div class="logo-container">
      <img src="/src/assets/中国移动.svg" alt="中国移动logo" class="logo-image" />
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue';

const tabs = [
  {
    name: '可再生发电',
    capabilities: [
      {title: '煤矿', icon: 'src/assets/煤矿.svg', description: ''},
      {title: '火电', icon: 'src/assets/火电站.svg', description: ''},
      {title: '光伏', icon: 'src/assets/光伏.svg', description: ''},
      {title: '风电', icon: 'src/assets/风电场.svg', description: ''}
    ]
  },
  {
    name: '其他能源',
    capabilities: [
      {title: '化工', icon: 'src/assets/化工厂.svg', description: ''},
      {title: '通信', icon: 'src/assets/通信.svg', description: ''}
    ]
  }
];

// 计算属性：第一行显示的卡片（原四个卡片）
const firstRowCapabilities = computed(() => tabs[0].capabilities);

// 计算属性：第二行显示的卡片（新增的两个卡片）
const secondRowCapabilities = computed(() => tabs[1].capabilities);

const backgroundCanvas = ref(null);
let ctx = null;
let animationFrameId = null;
let particles = [];

function initCanvas() {
  const canvas = backgroundCanvas.value;
  ctx = canvas.getContext('2d');

  function resizeCanvas() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
  }

  resizeCanvas();
  window.addEventListener('resize', resizeCanvas);
  initParticles();
  animate();
}

function initParticles() {
  particles = [];
  for (let i = 0; i < 100; i++) {
    particles.push({
      x: Math.random() * window.innerWidth,
      y: Math.random() * window.innerHeight,
      radius: Math.random() * 2 + 1,
      color: `rgba(173, 216, 230, ${Math.random() * 0.3 + 0.1})`,
      vx: Math.random() * 0.5 - 0.25,
      vy: Math.random() * 0.5 - 0.25
    });
  }
}

function animate() {
  animationFrameId = requestAnimationFrame(animate);
  ctx.fillStyle = 'rgba(220, 230, 240, 0.2)';
  ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  updateParticles();
}

function updateParticles() {
  for (let p of particles) {
    p.x += p.vx;
    p.y += p.vy;
    if (p.x < 0) p.x = ctx.canvas.width;
    if (p.x > ctx.canvas.width) p.x = 0;
    if (p.y < 0) p.y = ctx.canvas.height;
    if (p.y > ctx.canvas.height) p.y = 0;
    ctx.beginPath();
    ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);
    ctx.fillStyle = p.color;
    ctx.fill();
  }
  drawLines();
}

function drawLines() {
  const maxDistance = 150;
  for (let i = 0; i < particles.length; i++) {
    for (let j = i + 1; j < particles.length; j++) {
      const p1 = particles[i], p2 = particles[j];
      const dx = p1.x - p2.x, dy = p1.y - p2.y;
      const distance = Math.sqrt(dx * dx + dy * dy);
      if (distance < maxDistance) {
        const opacity = 1 - distance / maxDistance;
        ctx.strokeStyle = `rgba(173, 216, 230, ${opacity * 0.2})`;
        ctx.lineWidth = 0.5;
        ctx.beginPath();
        ctx.moveTo(p1.x, p1.y);
        ctx.lineTo(p2.x, p2.y);
        ctx.stroke();
      }
    }
  }
}

function highlightCard(event) {
  event.currentTarget.classList.add('card-highlight');
}

function resetCardHighlight(event) {
  event.currentTarget.classList.remove('card-highlight');
}

onMounted(() => initCanvas());
onUnmounted(() => {
  if (animationFrameId) cancelAnimationFrame(animationFrameId);
});
</script>

<style scoped>
html, body {
  height: 100%;
  margin: 0;
  overflow: hidden; /* 禁止页面滚动 */
}

.ai-platform {
  height: 100vh;
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
  background: linear-gradient(180deg, #e6f2ff 0%, #f0f7ff 100%);
  width: 100%;
  padding: 0;
  color: #333;
  overflow: hidden; /* 禁止内部内容溢出 */
  position: relative;
}

.background-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.main-content {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 30px 20px;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.title-section {
  text-align: center;
  margin-bottom: 10px; /* 减小标题与卡片之间的间距 */
  padding-top: 20px; /* 增加顶部间距 */
}

.title-section h1 {
  font-size: 80px;
  font-weight: bold;
  letter-spacing: 4px;
  color: #000;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.capabilities-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px; /* 减小卡片行之间的间距 */
  margin-top: 0; /* 取消顶部边距 */
  flex-grow: 1; /* 让卡片区域占据剩余空间 */
  justify-content: center; /* 垂直居中 */
}

.card-row {
  display: flex;
  justify-content: center;
  gap: 30px; /* 减小卡片之间的间距 */
}

.second-row {
  margin-top: 50px;
}

.capability-card {
  background: linear-gradient(135deg, rgba(173, 216, 230, 0.7) 0%, rgba(186, 183, 255, 0.7) 100%);
  border-radius: 15px;
  padding: 80px 25px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: all 0.4s ease;
  height: 280px; /* 减小卡片高度 */
  width: 230px; /* 减小卡片宽度 */
  position: relative;
  justify-content: space-between;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 32px 0 rgba(173, 216, 230, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.7);
  overflow: visible;
  z-index: 0;
}

.capability-card:hover {
  transform: translateY(-10px);
  background: linear-gradient(135deg, rgba(220, 235, 245, 0.9) 0%, rgba(200, 220, 255, 0.9) 100%);
  box-shadow: 0 15px 30px rgba(173, 216, 230, 0.5);
}

.card-highlight .capability-title {
  color: #4682B4;
}

.capability-card:after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(173, 216, 230, 0.15) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.5s;
}

.capability-card:hover:after {
  opacity: 1;
}

.capability-icon {
  position: absolute;
  top: -50px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: 100px; /* 减小图标容器大小 */
  height: 100px; /* 减小图标容器大小 */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.5s ease;
  transform-style: preserve-3d;
  perspective: 1000px;
}

.capability-card:hover .capability-icon {
  transform: translateX(-50%) scale(1.1);
}

.icon-image {
  width: 110px; /* 减小图标大小 */
  height: 110px; /* 减小图标大小 */
  filter: drop-shadow(0 5px 15px rgba(173, 216, 230, 0.6));
  transition: filter 0.5s;
  color: currentColor;
  fill: #4682B4;
  pointer-events: none;
}

.capability-card:hover .icon-image {
  filter: drop-shadow(0 8px 25px rgba(173, 216, 230, 0.8));
}

.capability-title {
  font-size: 45px;
  margin-bottom: 10px;
  margin-top: 15px; /* 减小顶部边距 */
  font-weight: bold;
  transition: color 0.5s;
  color: #000;
}

.capability-description {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(50, 50, 50, 0.8);
  max-width: 90%;
  margin: 0 auto;
  transition: color 0.5s;
}

.capability-card:hover .capability-description {
  color: rgba(0, 0, 0, 0.95);
}

.capability-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-grow: 0.5;
  padding-top: 5px;
  justify-content: center;
  pointer-events: all;
}

/* 右下角logo样式 */
.logo-container {
  position: fixed;
  bottom: 15px;
  right: 115px;
  z-index: 10;
  width: 160px; /* 减小logo尺寸 */
  height: auto;
}

.logo-image {
  width: 150%;
  height: auto;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
  transition: transform 0.3s ease;
}

.logo-image:hover {
  transform: scale(1.05);
}
</style>